<template>
  <transition name="modal">
    <div class="modal-mask" v-show="showMask">
      <div class="modal-alert">
        <div class="alert-content">{{content}}</div>
        <div class="alert-btn">
          <button class="sure" @click="closeMask">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: {
      content: {
        type: String,
        default: ''
      },
      value: {}
    },
    data() {
      return {
        showMask: false
      }
    },
    mounted() {
      this.showMask = this.value;
    },
    methods: {
      closeMask() {
        this.showMask = false;
        this.$emit("sure");
      }
    },
    watch: {
      value(newVal) {
        this.showMask = newVal;
      },
      showMask(val) {
        this.$emit('input', val);
      }
    },
  }
</script>

<style lang="stylus" scoped>
  .modal-mask
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    .modal-alert
      width: 7.2rem
      height: 4.267rem
      background: rgba(255, 255, 255, 1);
      border-radius: 0.173rem;
      box-sizing: border-box;
      transition: all .3s ease;
      .alert-content
        display: flex
        justify-content: center
        align-items: center
        height: 3.067rem
        width: 92%
        margin: 0 auto
        font-size: 0.387rem
        color: rgba(27, 27, 27, 1)
      .alert-btn
        width: 100%;
        height: 1.187rem
        border-top: 1px solid rgba(170, 170, 170, 1);
        .sure
          border-radius: 0rem 0rem 0.173rem 0.173rem;
          width: 100%;
          height: 100%;
          text-align: center
          font-size: 0.48rem;
          color: rgba(60, 175, 255, 1);
          line-height: 0.667rem;
          background: #FFF;

  .modal-enter, .modal-leave
    opacity: 0;

  .modal-transition
    transition: all .3s ease;

  .modal-enter .modal-alert,
  .modal-leave .modal-alert
    transform: scale(1.1);

  .modal-transition
    transition: all .3s ease;
</style>
